body{
	width: 100vw;
	height: 100vh;
	margin: 0;
	overflow: hidden;
}
#bg{
	width: 100vw;height: 100vh;
	background-image: url(../img/wf.png);
	background-repeat: no-repeat;
	background-size: contain; /* contain   cover */
	background-position: center;
	filter: blur(3vh) brightness(0.5);
	background-color: black;
}
main{
	position: absolute;
	left: 0;top: 0;
	color: white;
	width: 100vw;height: 100vh;
}
main>header{
	font-size: 4vh;text-align: center;
	height: 7vh;line-height: 7vh;
}
main>h4{
	font-size: 3vh;text-align: center;
	font-weight: normal;
	margin: 0;
	height: 5vh;line-height: 5vh;
}
#cover{
	margin: 0 auto;
	height: 50vh;width: 50vh;
}
#cover>section{
	position: absolute;
	width: 49vh;height: 49vh;
	background-image: url(../img/wf.png);
	background-size: cover;
	background-position: center;
	border-radius: 50%;
	animation: rotate 20s linear infinite;
}
/*歌手头像旋转的动画*/
@keyframes rotate{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
section:hover{
	/*animation-play-state: paused;*/
	/*animation-play-state: running;*/
}
#lrc{
	font-size: 2.5vh;text-align: center;
	color: lightgray;
	margin-top:0.5vh ;
}

/*滑动条样式的设置*/
input[type=range]{
	/*取出默认的样式*/
	-webkit-appearance: none;
}
/*滑动小圆点thumb*/
input[type=range]::-moz-range-thumb{
	background-color: green;
	width: 3vh;height: 3vh;
	border-radius: 50%;border: none;
}
/*滑动路径track*/
input[type=range]::-moz-range-track{
	background-color: green;height: 0.5vh;
}

/*chrome 浏览器的兼容*/
input[type=range]::-webkit-slider-thumb{
	-webkit-appearance: none;
	background-color: green;
	width: 3vh;height: 3vh;
	border-radius: 50%;border: none;
	margin-top:-1.3vh ;
}
/*滑动路径track*/
input[type=range]::-webkit-slider-runnable-track{
	background-color: green;height: 0.5vh;
}

/*IE 浏览器兼容*/
inptu[type=range]::-ms-thumb{
	background-color: green;
	width: 3vh;height: 3vh;
	border-radius: 50%;border: none;
}
input[type=range]::-ms-track{
	background-color: green;height: 0.5vh;
}



#time,#buttons,#volume{
	display: flex;align-items: center;
	padding: 2vh 4vh 2vh 4vh;justify-content: center;
}
#time>span{color: lightgray;font-size: 3vh;}
#time>input{flex-grow: 1;}
#buttons>img{width: 7vh;}
#buttons>img:nth-child(2){width: 10vh; margin: 0 3vh 0 3vh;}

/*音量设置*/
.icon{
	color: green;
	font-size: 20px;
}
#valume{
	width: 36vh;
	margin: 0 auto;
}

/*播放列表*/
aside{
	width: 100vw;height: 50vh;
	position: fixed;bottom: -50vh;
	color: white;
	background-color: black;
	z-index: 100;
}
aside>h2{
	text-align: center;
}
aside>footer{
	font-size: 3vh;
	position: absolute;bottom: 0;left: 46vw;
}
li{font-size: 3vh;
height: 5vh;}
small{color: orange;}

@keyframes flyUp{
	from{transform: translateY(50vh);}
	to{transform: translateY(-50vh);}
}
@keyframes flyDown{
	from{transform: translateY(-50vh);}
	to{transform: translateY(50vh);}
}

/*歌手头像飞出的动画*/
@keyframes flyOut{
	from{transform: translateY(0); opacity: 1;}
	to{transform: translateY(-50vh);opacity: 0;}
}